<!-- src/App.vue -->
<template>
  <div 
    id="app" 
    :class="appClasses"
    :style="appStyles"
  >
    <router-view />
  </div>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue';
import { useAppStore } from '@/store/app';

const appStore = useAppStore();

// 应用类名
const appClasses = computed(() => {
  return {
    'grey-mode': appStore.settings.Grey,
    'weak-mode': appStore.settings.Weak,
  };
});

// 应用样式（主题色）
const appStyles = computed(() => {
  return {
    '--el-color-primary': appStore.settings.EpThemeColor,
  };
});

// 优化的颜色混合函数 - 使用更好的算法
const adjustColor = (color, amount) => {
  const num = parseInt(color.replace('#', ''), 16);
  const r = (num >> 16) & 0xFF;
  const g = (num >> 8) & 0xFF;
  const b = num & 0xFF;
  
  // 如果是正值（变浅），与白色混合；负值（变深），与黑色混合
  const mix = amount > 0 ? 255 : 0;
  const abs = Math.abs(amount);
  
  const newR = Math.round(r + (mix - r) * abs);
  const newG = Math.round(g + (mix - g) * abs);
  const newB = Math.round(b + (mix - b) * abs);
  
  return '#' + ((1 << 24) + (newR << 16) + (newG << 8) + newB).toString(16).slice(1);
};

// 监听主题色变化，动态更新所有相关 CSS 变量
watch(() => appStore.settings.EpThemeColor, (newColor) => {
  // 主色
  document.documentElement.style.setProperty('--el-color-primary', newColor);
  // 浅色变体
  document.documentElement.style.setProperty('--el-color-primary-light-3', adjustColor(newColor, 0.7));
  document.documentElement.style.setProperty('--el-color-primary-light-5', adjustColor(newColor, 0.5));
  document.documentElement.style.setProperty('--el-color-primary-light-7', adjustColor(newColor, 0.3));
  document.documentElement.style.setProperty('--el-color-primary-light-8', adjustColor(newColor, 0.15));
  document.documentElement.style.setProperty('--el-color-primary-light-9', adjustColor(newColor, 0.08));
  // 深色变体
  document.documentElement.style.setProperty('--el-color-primary-dark-2', adjustColor(newColor, -0.2));
}, { immediate: true });

// 初始化
// 配置已从 localStorage 自动加载
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Element Plus 组件文字颜色修复 - 确保主题色背景时文字为白色 */
.el-button--primary,
.el-button--primary:hover,
.el-button--primary:focus,
.el-button--primary:active {
  color: #ffffff !important;
}

.el-tag--primary {
  color: #ffffff !important;
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}

.el-button--primary .el-icon,
.el-tag--primary .el-icon {
  color: #ffffff !important;
}

/* 灰色模式 */
.grey-mode {
  filter: grayscale(100%);
}

/* 色弱模式 */
.weak-mode {
  filter: invert(80%);
}
</style>
